import React, { Component } from 'react'
import "./mynote.scss"
import { message, Pagination } from 'antd';
import { getApiUserNote , getApiSearchInfo , getApiSaveUserNote , getApiDelUserNote } from "../../axios/api"
import { get } from '../../axios/localstorage';

export default class mynote extends Component {

    state = {
        page:1,
        total:1,
        list:[],
        courseList:[],
        showCourse:false,
        course:{},
        title:"",

        showFont:false,
        fontList:[
            {label:"12px",size:1},
            {label:"14px",size:2},
            {label:"16px",size:3},
            {label:"18px",size:4},
            {label:"20px",size:5},
        ],
        font:'',
        colorChange:true,
        alert:false,
        keywords:'',
        noteData:{},

        delAlert:false,

        showColor:false,

        color:"#1bba84",

        colors:[
            '#FF0000',
            '#FF7D00',
            '#FFFF00',
            '#00FF00',
            '#00FFFF',
            '#0000FF',
            '#FF00FF',
            '#000000',
        ],
    }

    componentDidMount(){

        window.scroll(0,0);

        this.getUserNote();

        this.getSearchInfo();

    }

    initUserNote=()=>{

        this.setState({
            page:1,
        })

        setTimeout(()=>{
            this.getUserNote();
        },50)
    }

    gotoDel=()=>{
        let param = {
            token:get('token'),
            id:this.state.noteData.id,
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiDelUserNote(param)
        .then( req =>{
            this.setState({
                delAlert:false,
            })
            if(req.data.code === 1){
                message.success('删除成功！');
                this.initUserNote();
            }else{
                
                message.info(req.data.msg);
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPrintNote=(item)=>{
        this.setState({
            noteData:item,
            title:item.type === 2? item.l_title :item.title,
        })
        let textBox = document.getElementById('textBox');
        textBox.innerHTML = item.html_content;

        this.doPrint();
    }

    gotoSaveLiveNote=()=>{
        let div = document.getElementById('textBox');
        let text = div.innerHTML;

        let param = {
            type:2,
            live_id:this.state.noteData.live_id,
            id:this.state.noteData.id?this.state.noteData.id:'',
            title:this.state.title,
            content:text.toString(),
            token:get('token'),
            types:get('type')?get('type'):0,
        }

        getApiSaveUserNote(param)
        .then(req =>{
            if(req.data.code === 1){
                message.success("保存成功！");
                this.getUserNote();
                this.setState({
                    alert:false
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoSaveNote=()=>{

        let div = document.getElementById('textBox');
        let text = div.innerHTML;

        let param = {
            type:1,
            course_id:this.state.noteData.course_id,
            chapter_id:this.state.noteData.chapter_id,
            content_id:this.state.noteData.content_id,
            id:this.state.noteData.id?this.state.noteData.id:'',
            title:this.state.title,
            content:text.toString(),
            token:get('token'),
            types:get('type')?get('type'):0,
            contents:get('city')?get('city'):get('mechanism'),
        }

        getApiSaveUserNote(param)
        .then(req =>{
            if(req.data.code === 1){
                message.success("保存成功！");
                this.getUserNote();
                this.setState({
                    alert:false
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoShowNote=(item)=>{
        this.setState({
            noteData:item,
            title: item.type === 2? item.l_title : item.title,
            alert:true,
        })
        let textBox = document.getElementById('textBox');
        textBox.innerHTML = item.html_content;
    }


    getSearchInfo=()=>{
        let param = {
            token:get('token'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiSearchInfo(param)
        .then( req =>{

            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    courseList:data
                })
            }
            
        }).catch( err =>{
            console.error(err);
        })
    }

    getUserNote=()=>{
        let param = {
            token:get('token'),
            page:this.state.page,
            keyword:this.state.keywords,
            course_id:this.state.course.id?this.state.course.id:null,
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism'),
        }

        getApiUserNote(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data.list,
                    total:data.total,
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    changePage=(page)=>{
        console.log(page);
        this.setState({
            page
        })

        setTimeout(()=>{
            this.getUserNote();
        },50)
    }

    gotoChooseCourse=(index)=>{
        let course = this.state.courseList[index];
        this.setState({
            course
        })

        this.initUserNote();
    }

    gotoChangeText=()=>{
        // document.execCommand("bold");
        // var aa = document.execCommand("bold", false, null);
        // console.log(aa);//若log输出true说明点击按钮后按钮生效；
    }

    doPrint = () => {

        const el = document.getElementById('printBox');
        const iframe = document.createElement('IFRAME');
        let ppp = document.getElementById('ppp');
        let doc = null;
        // iframe.setAttribute('style', 'position:absolute;width:0px;height:0px;left:500px;top:500px;');
        ppp.appendChild(iframe);
        doc = iframe.contentWindow.document;
        // 引入打印的专有CSS样式，根据实际修改
        // doc.write('<LINK rel="stylesheet" type="text/css" href="css/print.css">');
        doc.write(el.innerHTML);
        doc.close();
        // 获取iframe的焦点，从iframe开始打印
        iframe.contentWindow.focus();
        iframe.contentWindow.print();
        if (navigator.userAgent.indexOf("MSIE") > 0)
        {
            ppp.removeChild(iframe);
        }
    }

    render() {
        return (
            <div className="mynote">
                <div className="nmain">
                    <div className="title">
                        <h1>我的笔记</h1>
                        <div className="right">
                            {/* <div className="selbox" onClick={()=>{
                                if(this.state.courseList.length === 0){
                                    message.info("暂无相关课程可选择！");
                                    return false;
                                }
                                this.setState({showCourse:!this.state.showCourse})
                                }}>
                                <p className={this.state.course.title?'pt':""}>{this.state.course.id?this.state.course.title:'选择相关课程'}</p>
                                <img alt="" src="assets/imgs/xialaxuanze.png" />
                                <div className="sels" hidden={!this.state.showCourse} onMouseLeave={()=>{this.setState({showCourse:false})}}>
                                    {
                                        this.state.courseList.map((item,index)=>{
                                            return <h4 key={index} className={this.state.course.id === item.id?'hover':''} onClick={()=>{this.gotoChooseCourse(index)}}>{item.title}</h4>
                                        })
                                    }
                                </div>
                            </div>
                            <input type="text" placeholder="输入笔记标题" value={this.state.keywords} onChange={(ev)=>{this.setState({keywords:ev.target.value})}} />
                            <button onClick={()=>{this.initUserNote()}}>搜索</button> */}
                        </div>
                    </div>

                    <div className="none" hidden={this.state.list.length !== 0}>
                        <div className="cen">
                            <img alt="" src="assets/imgs/zanwuxuexineirong.png" />
                        </div>
                        <p>暂无笔记记录</p>
                    </div>

                    {
                        this.state.list.map((item,index)=>{
                            return <div className="item" key={index}>
                                        <div className="iname">
                                            <h2>{item.type === 2? item.l_title : item.title}</h2>
                                            <p>{item.create_time_text}</p>
                                        </div>
                                        <div className="idiv">
                                            <p>{item.content}</p>
                                        </div>
                                        <div className="i_options">
                                            <div className="imgs">
                                                <img onClick={()=>{this.gotoShowNote(item)}} alt="" src="assets/imgs/bianji.png" />
                                                <img onClick={()=>{this.gotoPrintNote(item)}} alt="" src="assets/imgs/dayin.png" />
                                                <img onClick={()=>{this.setState({noteData:item,delAlert:true})}} alt="" src="assets/imgs/shanchu.png" />
                                            </div>
                                        </div>
                                    </div>
                        })
                    }
                </div>
                <div className='r_page' hidden={this.state.list.length === 0}>
                    <Pagination type="primary" showSizeChanger={false} pageSize={5}  defaultCurrent={this.state.page} total={this.state.total} onChange={(page)=>{this.changePage(page)}} />
                </div>

                <div className="ppp" id="ppp"></div>

                <div className="alert" hidden={!this.state.delAlert}>
                    <div className="delBox">
                        <div className="cen">
                            <img alt="" src="assets/imgs/cuowutishi.png" />
                        </div>
                        <h2>删除提示</h2>
                        <p>确定要删除这份笔记吗？</p>
                        <div className="abtns">
                            <button className="btn1" onClick={()=>{this.gotoDel()}}>确定</button>
                            <button className="btn2" onClick={()=>{this.setState({delAlert:false})}}>取消</button>
                        </div>
                    </div>
                </div>

                <div className="alert" hidden={!this.state.alert}>
                    <div className="abox">
                        <img className="close" onClick={()=>{this.setState({alert:false})}} alt="" src="assets/imgs/chacha.png" />
                        <div className="atitle">笔记详情</div>
                        <div className="aflex">
                            <div className="aleft">
                                <div className="aitem">
                                    <input type="button" name="" value="加粗" onClick={()=>{document.execCommand('Bold')}} />
                                    <div className="adiv">
                                        <div className="cen">
                                            <img alt="" className="icon3" src="assets/imgs/icon3.png" />
                                        </div>
                                        <p>加粗</p>
                                    </div>
                                </div>
                                <div className="aitem">
                                    <input type="button" name="" value="倾斜" onClick={()=>{document.execCommand('Italic')}} />
                                    <div className="adiv">
                                        <div className="cen">
                                            <img alt="" className="icon2" src="assets/imgs/icon2.png" />
                                        </div>
                                        <p>倾斜</p>
                                    </div>
                                </div>
                                <div className="aitem">
                                    <input type="button" name="" value="下划线" onClick={()=>{document.execCommand('Underline')}} />
                                    <div className="adiv">
                                        <div className="cen">
                                            <img alt="" className="icon4" src="assets/imgs/icon4.png" />
                                        </div>
                                        <p>下划线</p>
                                    </div>
                                </div>
                                <div className="aitem" onMouseEnter={()=>{this.setState({showFont:true})}} onMouseLeave={()=>{this.setState({showFont:false})}}>
                                    <div className="adiv">
                                        <div className="cen">
                                            <img alt="" className="icon1" src="assets/imgs/icon1.png" />
                                        </div>
                                        <p>字号</p>
                                    </div>

                                    <div className="sels" hidden={!this.state.showFont} >
                                        {
                                            this.state.fontList.map((item,index)=>{
                                                return <div key={index} className={this.state.font === item.label?'hover':''} onClick={()=>{this.setState({font:item})}}>
                                                    {item.label}
                                                    <input type="button" name="" value="字体" onClick={()=>{document.execCommand('Fontsize',false,item.size)}} />
                                                    </div>
                                            })
                                        }
                                    </div>
                                </div>
                                <div className="aitem" onMouseEnter={()=>{this.setState({showColor:true})}} onMouseLeave={()=>{this.setState({showColor:false})}}>
                                    {/* <input type="button" name="" value="下划线" onClick={()=>{

                                        if(this.state.colorChange){
                                            console.log(1);
                                            document.execCommand("ForeColor",false,"#1BBA84");
                                        }else{
                                            console.log(2);
                                            document.execCommand("ForeColor",false,"#000000");
                                        }

                                        this.setState({
                                            colorChange:!this.state.colorChange
                                        })

                                    }} /> */}
                                    <div className="adiv">
                                        <div className="cen">
                                            <img alt="" className="icon1" src="assets/imgs/icon1.png" />
                                        </div>
                                        <div className="cen">
                                            <span style={{background:this.state.color}}></span>
                                        </div>
                                        <p>颜色</p>
                                    </div>

                                    <div className='color_picker' hidden={!this.state.showColor}>

                                        <div className='cbox'>
                                            {
                                                this.state.colors.map((item,index)=>{
                                                    return <input type="button" key={index} style={{background:item}} className='cbtn' onClick={()=>{this.setState({color:item});document.execCommand("ForeColor",false,item);}} />
                                                })
                                            }
                                            

                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                            {/* <input type="button" name="Submit8" value="加粗" onClick={()=>{document.execCommand('Bold')}} /> */}
                            <div className="aright" id='printBox'>
                                <div className="aipt">
                                    <input type="text" style={{border:0}} placeholder="请填写笔记标题" value={this.state.title} onChange={(ev)=>{this.setState({title:ev.target.value})}} />
                                </div>
                                <div className="atext" id="textBox" contentEditable="true"></div>
                            </div>
                        </div>
                        <div className="abtns">
                            <button className="abtn1" onClick={()=>{
                                
                                if(this.state.noteData.type === 2){
                                    this.gotoSaveLiveNote();
                                }else{
                                    this.gotoSaveNote()
                                }
                                }}>更新保存</button>
                            <button className="abtn2" onClick={()=>{this.doPrint()}}>打印</button>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
